<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>02_JSX_DEMO</title>
</head>
<body>
<h2>前端JS框架列表</h2>
<div id="example1">

</div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    /*
     功能: 动态展示列表数据
     */
    /*
        问题:如何将一个数据的数组转换为一个标签的数组?
            使用数组的map()
     */
    const names = ["jquery", "zepto", "angular", "react", "vue"];
    /*
            <ul>
                <li>name</li>
            </ul>
     */
    // 创建虚拟dom
    const ul = (
        <ul>
            {
                names.map((name, index) => <li key={index}>{name}</li>)
            }
        </ul>
    );
    // 渲染dom
    ReactDOM.render(ul, document.getElementById("example1"));
    const x = document.getElementById("example1");
</script>
</body>
</html>
